<template>
  <div v-show="select==0">
        <GUAN/>
    </div>
    <div v-show="select==1">
        <ShangDian/>
    </div>
    <div v-show="select==2">
        <JiaHao/>
    </div>
    <div v-show="select==4">
  <div class="user-center">
    <van-nav-bar
      title="个人中心"
      left-text="个人主页"
      left-arrow
      right-text="设置"
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <div class="user-header">
      <img src="../assets/10.png" alt="头像" class="user-avatar"/>
      <div class="user-info">
        <h3>Cruise</h3>
        <van-badge content="Lv3" type="primary" />
      </div>

    </div>
    <div class="stats">
      <div class="stat-item">154 关注</div>
      <div class="stat-item">24 收藏</div>
      <div class="stat-item">384 点赞</div>
      <div class="stat-item">1254 足迹</div>
    </div>
    <van-cell-group>
      <van-cell title="创作中心" is-link />
      <van-cell title="我的订单" is-link />
      <van-cell title="我的钱包" is-link />
      <van-cell title="购物袋" is-link />
      <van-cell title="地址管理" is-link />
      <van-cell title="帮助与支持" is-link />
    </van-cell-group>
    
    </div>
    </div>
    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" @change="onTabChange">
      <van-tabbar-item name="首页" @click="select=0">首页</van-tabbar-item>
      <van-tabbar-item name="商城" @click="select=1">商城</van-tabbar-item>
      <van-tabbar-item name="+" icon="plus" @click="select=2">+</van-tabbar-item>
      <van-tabbar-item name="消息">消息</van-tabbar-item>
      <van-tabbar-item name="我的" @click="select=4">我的</van-tabbar-item>
    </van-tabbar>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import GUAN from './home/shouye.vue'
import JiaHao from './home/JiaHao.vue'
import ShangDian from './shangdian/ShangDian.vue'
let select = ref("");
const router = useRouter();
// 底部导航栏激活项
const active = ref('home')
// 底部导航跳转
// const onTabChange = (name) => {
//   if (name === 'shouye') router.push('/shouye')
//   if (name === 'Login') console.log('/Login')
//   if (name === 'Login') router.push('/Login')
//   if (name === 'UserCenter') router.push('/UserCenter')
// }
const onClickLeft = () => {
  router.push('/personal');
};
const onClickRight = () => {
  router.push('/settings');
};
</script>

<style scoped>
.user-center {
  background-color: #ebf5fa;
  padding: 16px;
}
.user-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.user-info {
  margin-left: 8px;
}
.stats {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}
.stat-item {
  color: #666;
}
.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
</style>